<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax的封装</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script src="js/tools.js"></script>
</head>

<body>
    <button id="btnNode">获取数据</button>

    <script>
        /*
        正常的ajax
         url: 请求路径
         type： 请求类型
         data: 请求参数 
         dataType： json text  jsonp  响应类型
         async： 是否异步 true
         success: 回调函数

          dataType:"jsonp",
           jsonp:"cb",
          jsonpCallback:"hello",  

         contentType:  设置请求头  post 请求
         heads:{} 请求头信息
         http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1
        
        */

        // function myAjax(dataObj) {
        //     // 1 从dataObj 对象中获取参数信息
        //     var url = dataObj.url;
        //     var type = dataObj.type || "GET";
        //     var data = dataObj.data || {};
        //     var dataType = dataObj.dataType || "text";
        //     var async = dataObj.async !== false
        //     var success = dataObj.success;
        //     // 2 编写参数  key = value
        //     var params = "t=" + Date.now()
        //     for (var key in data) {
        //         var value = data[key];
        //         params += "&" + key + "=" + value;
        //     }
        //     // 跨域
        //     if (dataType === "jsonp") {
        //         var jsonp = dataObj.jsonp || "callback";
        //         var jsonpCallback = dataObj.jsonpCallback || "jQuery" + ("1.2.1" + Math.random()).replace(/\D/g, "") +
        //             "_" + Date.now()
        //         params += "&" + jsonp + "=" + jsonpCallback;
        //         // 创建script标签 发送跨域请求
        //         var scriptNode = document.createElement("script");
        //         scriptNode.src = url+"?"+params
        //         // 2 将script加入到head中
        //         // 2.1 获取到head节点
        //         var headNode = document.querySelector("head");
        //         // 2.2 将script 添加到head的最后面
        //         headNode.appendChild(scriptNode)
        //         window[jsonpCallback] = function(data) {
        //             success(data)
        //         }
            
        //         return;
        //     }

        //     // 非跨域
        //     var xhr = new XMLHttpRequest();
        //     if ("GET" === type.toUpperCase()) {
        //         // 准备发送
        //         xhr.open(type, url + "?" + params, async)
        //         // 发送
        //         xhr.send()
        //     } else if ("POST" === type.toUpperCase()) {
        //         // 准备发送
        //         xhr.open(type, url, async)
        //         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
        //         // 发送
        //         xhr.send(params)
        //     }
        //     if(!async) {
        //         var value = xhr.responseText;
        //             if (dataType === "json") {
        //                 value = JSON.parse(value)
        //             }
        //         success(value)
        //         return;
        //     }
        //     // 事件监听
        //     xhr.onreadystatechange = function () {
        //         // ajax状态码和响应码 
        //         if (xhr.readyState === 4 && xhr.status === 200) {
        //             var value = xhr.responseText;
        //             if (dataType === "json") {
        //                 value = JSON.parse(value)
        //             }
        //             success(value)
        //         }
        //     }
        // }

        btnNode.onclick = function () {
            $$.myAjax({
                url: "https://httpbin.org/post",
                type: "post",
                data: {
                    username: "admin",
                    password: "123456"
                },
                dataType: "json",
                async:true,
                success: function (data) {
                    console.log(data);

                }
            })

            $$.myAjax({
                url: "http://www.phonegap100.com/appapi.php",
                type:"get",
                data: {
                    a: "getPortalList",
                    catid: 20,
                    page: 1
                },
                async:true,
                dataType: "json",
                success: function (data) {
                    console.log(data);

                }
            })

           
            // myAjax({
            //     url:"https://opendata.baidu.com/api.php?resource_id=51274&ks_from=aladdin&new_need_di=1&from_mid=1&sort_type=1&query=%E5%A5%BD%E7%9C%8B%E7%9A%84%E7%94%B5%E5%BD%B1&tn=wisexmlnew&dsp=iphone&format=json&ie=utf-8&oe=utf-8&q_ext=%7B%22query_key%22%3A3%2C%22is_person_related%22%3A0%2C%22video_type_list%22%3A%5B%5D%7D&sort_key=3&stat0=%E7%94%B5%E5%BD%B1&stat1=%E5%85%A8%E9%83%A8&stat2=%E5%85%A8%E9%83%A8&stat3=%E5%85%A8%E9%83%A8&rn=10&pn=8&trigger_srcid=51251&sid=39712_39840_39904_39819_39909_39934_39933_39944_39941_39939_39931_39781_39974_39662_40011&qq-pf-to=pcqq.group",
            //     dataType:"jsonp",
            //     jsonp:"cb",
            //     jsonpCallback:"hello",
            //     success:function(data) {
            //         console.log(data);
            //     }
            // })
        }
    </script>

</body>

</html>